@color-Body: #34495E;
@dim-Loader-item: 20px;
@color-Loader-item: #F1C40F;


body {
  background-color: @color-Body;
  min-height: 100vh;
  
  .display(flex);
  .justify-content(center);
  .align-items(center);
}

.Loader {
  width: @dim-Loader-item * 6;
  height: @dim-Loader-item * 2;
  
  .display(flex);
  .align-items(center);
  .justify-content(space-between);
}

.Loader-item {
  width: @dim-Loader-item;
  height: @dim-Loader-item;
  background-color: @color-Loader-item;
  
  .border-radius(50%);
  .animation-name(anim-Loader-item);
  .animation-duration(1600ms);
  .animation-iteration-count(infinite);
}

.generateDelays-Loader-item(5);

@keyframes anim-Loader-item{
  0%  { transform: translateY(-10px)}
  60% { transform: scale(0.1); opacity: 0.1}
  100%{ transform: scale(0.1); opacity: 0.1}
} 

.generateDelays-Loader-item(@n, @i: 1) when (@i =< @n) {
  .Loader-item:nth-child(@{i}) {
    .animation-delay(200 * (@i - 1));
  }
  .generateDelays-Loader-item(@n, (@i + 1));
}